<template>
  <!--
    时间： 2024年9月24日 16点34分
    这里使用openLayer
  -->
  <div class="open-layer-box">
    <div id="map" class="map"></div>
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import Map from "ol/Map";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import VectorTileLayer from "ol/layer/VectorTile.js";
import {TileGrid} from "ol/tilegrid.js";
import {fromLonLat, get as getProjection} from 'ol/proj.js';
import {TileWMS, WMTS, XYZ} from "ol/source.js";
import proj from "proj4/lib/Proj.js";
import TileGridWMTS from 'ol/tilegrid/WMTS.js';
import {getTopLeft} from 'ol/extent.js';
import {optionsFromCapabilities} from "ol/source/WMTS.js";
import {GeoJSON, WFS, WMTSCapabilities} from "ol/format.js";
import VectorSource from "ol/source/Vector.js";
import {Vector} from "ol/layer.js";

const map = ref();

onMounted(() => {
  initOpenLayerMapToWmts();
  // initOpenLayerMap();
});

/**
 * @description 初始化地图
 */
function initOpenLayerMap() {
  const projection = getProjection('EPSG:4326'); // 设置地图投影
  const extent = projection.getExtent(); // 地图范围
  // 切片名，可以根据后台缩放等级数量减少，但必须与切片大小一一对应
  const matrixIds = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10',
    'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
  // 切片大小
  const resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5,
    4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];

  const waPianWMTS = new WMTS({
    url: "http://192.168.1.137:8080/geoserver/zz_map/wms",
    layer: 'zz_map:WSPoint',
    // matrixSet: 'YOUR_MATRIX_SET',
    format: 'image/png',
    projection: 'EPSG:4547', // 使用EPSG:4547
    tileGrid: new TileGridWMTS({
      origin: getTopLeft(extent), // 坐标原点
      extent: [495721.4039515078, 3074864.209874604, 507536.79252877756, 3089523.6903711194], // 根据你的数据设置
      matrixIds, // 瓦片矩阵的行列数
      tileSize: [256, 256], // 瓦片大小
      resolutions, // 瓦片分辨率数组
    }),
    style: 'default'
  });

  map.value = new Map({
    layers: [
      // TileLayer 瓦片图层。一般加载切片图层（wmts,wms）
      new TileLayer({
        //由于我们使用的是自己的服务，所以
        //必须使用 TileWMS
        // TileWMS 是用来 来自WMS服务器的平铺数据的图层源
        // 所以我们要仔细看路径中给的服务类型
        source: new TileWMS({
          url: "http://192.168.1.137:8080/geoserver/zz_map/wms",
          params: {
            service: "wms",
            VERSION: '1.1.1',
            //这个BBOX不用你管，是openLayer自己变化的
            // BBOX: [112.97893524169922, 27.509078979492188, 113.36688995361328, 28.036422729492188],
            LAYERS: "zz_map:0",
            // LAYERS: "zz_map:zz-map",
            // LAYERS: "zz_map:WSPoint",
            exceptions: 'application/vnd.ogc.se_inimage',
            // SRS: "EPSG:4547"
          },
          serverType: 'geoserver', // 指定服务类型
        }),
      }),
      // new TileLayer({
      //   source:waPianWMTS,
      // })
    ],
    target: "map",
    view: new View({
      // 设置中心点
      center: [113.11832, 27.81395],
      zoom: 14,
      projection: "EPSG:4326",
      // projection: "EPSG:4547",
    })
  });

}

/**
 * @description 初始化地图2
 *
 */
function initOpenLayerMapToWmts() {
  const parser = new WMTSCapabilities();
  // const vectorSource = new VectorSource()
  const resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5,]
  const extent = [476089.53456261946, 3054745.599922355, 523351.0888716983, 3113383.521908417];
  const featureRequest = new WFS().writeGetFeature({
    srsName: 'EPSG:3857',
    featureNS: 'http://openstreemap.org',
    featurePrefix: 'osm',
    featureTypes: ['water_areas'],
    outputFormat: 'application/json',
    // filter: andFilter(
    //   likeFilter('name', 'Mississippi*'),
    //   equalToFilter('waterway', 'riverbank')
    // ),
  });

  const wfsLayer = new Vector({
    // format: new GeoJSON(),
    // url: function () {
    //   return (
    //     "http://192.168.1.137:8080/geoserver/zz_map/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=zz_map%3AWSPoint&maxFeatures=50&outputFormat=application%2Fjson"
    //   );
    // }
    source: new VectorSource({
      url: "http://192.168.1.137:8080/geoserver/zz_map/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=zz_map%3AWSPoint&maxFeatures=50&outputFormat=application%2Fjson",
      format: new GeoJSON()
    })
  })
  // 创建地图
  const map = new Map({
    target: 'map',
    layers: [
      new TileLayer({
        //由于我们使用的是自己的服务，所以
        //必须使用 TileWMS
        // TileWMS 是用来 来自WMS服务器的平铺数据的图层源
        // 所以我们要仔细看路径中给的服务类型
        source: new TileWMS({
          url: "http://192.168.1.137:8080/geoserver/zz_map/wms",
          params: {
            service: "wms",
            VERSION: '1.1.1',
            //这个BBOX不用你管，是openLayer自己变化的
            // BBOX: [112.97893524169922, 27.509078979492188, 113.36688995361328, 28.036422729492188],
            LAYERS: "zz_map:0",
            // LAYERS: "zz_map:zz-map",
            // LAYERS: "zz_map:WSPoint",
            exceptions: 'application/vnd.ogc.se_inimage',
            // SRS: "EPSG:4547"
          },
          serverType: 'geoserver', // 指定服务类型
        }),
      })
    ],
    view: new View({
      // 设置中心点
      center: [500807.32576, 3073251.6427],
      // center: [113.11832, 27.81395],
      zoom: 17
    })
  });
  map.addLayer(wfsLayer);


  // fetch("http://192.168.1.137:8080/geoserver/zz_map/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=zz_map%3AWSPoint&maxFeatures=50&outputFormat=application%2Fjson").then((result)=>{
  //   return result.json();
  // }).then((res) => {
  //   const result = parser.read(res);
  //   console.log(117, res);
  //   const options = optionsFromCapabilities(result, {
  //     layer: 'layer-7328',
  //     matrixSet: 'EPSG:3857',
  //   });
  //
  //   new Map({
  //     layers: [
  //       new TileLayer({
  //         source: new OSM(),
  //         opacity: 0.7,
  //       }),
  //       new TileLayer({
  //         opacity: 1,
  //         source: new TileGridWMTS(options),
  //       }),
  //     ],
  //     target: 'map',
  //     view: new View({
  //       center: [19412406.33, -5050500.21],
  //       zoom: 5,
  //     }),
  //   });
  //
  // });


  // const tileGrid = new TileGrid({
  //   extent,
  //   tileSize: [256, 256], // 瓦片大小
  //   resolutions: [ // 这里需要根据你的需求设置分辨率
  //     500, 250, 125, 62.5, 31.25, 15.625
  //   ],
  //   origin: [500872.74, 3089747.97] // 原点，通常为左上角
  // });
  //
  // const wmtsLayer = new TileLayer({
  //   source: new WMTS({
  //     url: 'http://192.168.1.137:8080/geoserver/zz_map/wms',
  //     // layer: 'zz_map:WSPoint',
  //     layer: 'zz_map:0',
  //     // matrixSet: 'YOUR_MATRIX_SET',
  //     format: 'image/png',
  //     projection: 'EPSG:4326',
  //     matrixSet: 'EPSG:4326', // 瓦片矩阵集名称
  //     tileGrid: tileGrid,
  //     style: 'default',
  //     SERVICE: "WMTS"
  //   })
  // });
  //
  // const map = new Map({
  //   target: 'map',
  //   layers: [wmtsLayer],
  //   view: new View({
  //     center:fromLonLat([502000, 3088000]), // 初始中心坐标
  //     zoom: 5 // 初始缩放级别
  //   })
  // });

}


</script>
<style scoped>
.map {
  width: 100vw;
  height: 100vh;
  //background: #666;
}
</style>
